<template>
  <div class="co_purchase">
    <div
      class="co_pu_list"
      v-for="(item,index) in co_purchase"
      :key='index'
      @click="gogo(item)"
    >
      <div class="co_pu_top">
        <div>
          <img
            :src="item.cover"
            alt=""
          >
        </div>
        <div>
          <div>
            <p>{{item.title}}</p>
            <!-- <section class="buy-number">数量: 1个</section> -->
          </div>
          <div>{{item.name}}</div>
          <div class="pay-pay"> 实付：<span>¥{{item.money/100}}</span></div>
          <!-- <section class="danxi">{{item.cur_status === '0' ? '系' : '单'}}</section> -->
        </div>
      </div>
      <div class="co_pu_bot">
        <div class="cp_Gift_giving">
          <section>数量:&nbsp;&nbsp;1个</section>
          <section>购买时间:{{item.create_time}}</section>
        </div>
        <div v-if="item.distribution_type">
          <div class="cp_status_one">
            <div
              class="zeng-song"
              v-if="item.distribution_type && item.distribution_type == 2"
            >来自{{item.distribution_title}}的赠礼</div>
            <div
              class="zeng-song"
              v-if="item.distribution_type && item.distribution_type == 1"
            >赠礼</div>
            <div v-if="item.is_distribution === '0'"></div>
            <div
              class="send-kill"
              v-if="item.is_distribution === '1'"
            > 秒杀</div>
            <div
              v-if="item.is_distribution === '3'"
              class="assemble"
            >拼团</div>
            <!-- <span>实付：</span>¥{{item.money/100}} -->
            <!-- <div
            class="co_pu_money"
            v-if="item.distribution_type"
          >
            <div><span>数量：{{item.count}}个</span></div>
            <div>购买时间：{{item.create_time}}</div>
          </div> -->
          </div>
        </div>

      </div>
    </div>
    <div
      v-if="co_purchase.length == 0"
      class="copur_kong"
    >
      <img
        src="https://o6wndwjxn.qnssl.com/%E7%BB%843@2x.png"
        alt
      >
      <div>暂无购买记录~</div>
    </div>
  </div>
</template>

<script>
import {
  shop_log
} from '@/api/center'
import {
  mapState
} from 'vuex'
export default {
  computed: {
    ...mapState({
      app_id: state => state.app_id,
      user_id: state => state.member_id
    })
  },
  data () {
    return {
      co_purchase: []
    }
  },
  created () {
    this.getData()
  },
  methods: {
    gogo (item) {
      this.$router.push({
        path: '/coursedetails',
        query: {
          curriculumId: item.curriculum_id
        }
      })
    },
    getData () {
      let requery = {
        app_id: this.app_id,
        member_id: this.user_id
      }
      shop_log(requery).then(res => {
        // console.log('购买记录', res)
        let {
          code,
          data
        } = res.data
        this.co_purchase = data
        this.$store.commit('updateLoadingStatus', { isLoading: false })
      })
    }
  }
}
</script>

<style scoped>
.cp_status_one {
  position: absolute;
  right: 0;
  bottom: -18%;
  padding-left: 20px;
}
.cp_status_one > .zeng-song {
  font-family: PingFangSC-Medium;
  font-size: 12px;
  height: 45px;
  line-height: 45px;
  color: #f39800;
  letter-spacing: 0.43px;
  background-image: url("http://o6wndwjxn.qnssl.com/3372d201903061109146239.svg");
  background-size: calc(100vw * 50 / 750);
  background-position: 0 center;
  text-indent: calc(100vw * 68 / 750);
  background-repeat: no-repeat;
  text-overflow: ellipsis;
  display: -webkit-box;
  /* -webkit-box-orient: vertical; */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.assemble {
  font-family: PingFangSC-Medium;
  font-size: 12px;
  color: #ed6c00;
  letter-spacing: 0.43px;
  background-image: url("http://o6wndwjxn.qnssl.com/29fea201903061056352496.svg");
  background-size: calc(100vw * 48 / 750);
  height: 100%;
  background-position: 0 center;
  text-indent: calc(100vw * 68 / 750);
  background-repeat: no-repeat;
}
.send-kill {
  font-family: PingFangSC-Medium;
  font-size: 12px;
  color: #f2d847;
  letter-spacing: 0.43px;
  background-image: url("http://o6wndwjxn.qnssl.com/71b67201903061050132023.svg");
  background-repeat: no-repeat;
  background-size: calc(100vw * 48 / 750);
  height: 100%;
  background-position: 0 center;
  text-indent: calc(100vw * 68 / 750);
}
.buy-number {
  font-family: PingFangSC-Medium;
  font-size: 12px;
  color: #999999;
  letter-spacing: 0.4px;
  line-height: 25px;
}
.pay-pay {
  font-size: 12px;
  color: #999999;
  position: absolute;
  right: 0;
  bottom: 0;
}
.pay-pay > span {
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #ff0000;
  letter-spacing: 0.4px;
}
.copur_kong {
  width: 100vw;
  overflow: hidden;
}
.copur_kong > img {
  width: 70vw;
  margin-left: 27vw;
  margin-top: 25vw;
}
.copur_kong > div {
  width: 100vw;
  text-align: center;
  font-size: 14px;
  color: #333333;
}
.cp_status_one > div {
  flex: 1;
  text-align: left;
  font-size: 12px;
  color: #9d9d9d;
}
.cp_Gift_giving > section {
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #b2b2b2;
}
.cp_Gift_giving > section:nth-of-type(1) {
  margin-top: 7px;
  margin-bottom: 4px;
  text-align: left;
}
.cp_Gift_giving > section:nth-of-type(2) {
  text-align: left;
}
.co_purchase {
  height: 100vh;
  overflow: scroll;
}

.co_pu_list {
  /* height: 190px; */
  background-color: #f9f9f9;
  margin: 0 15px;
  height: 136px;
  padding: 10px;
  box-sizing: border-box;
  margin-bottom: 20px;
}
.co_pu_list:last-child {
  margin-bottom: 0;
}

.co_pu_top {
  /* border-bottom: 1px solid #eeeeee; */
  display: flex;
  height: calc(100vw * 145 / 750);
}

.co_pu_top > div:nth-child(1) {
  flex: 0 0 calc(100vw * 0.36);
  overflow: hidden;
}

.co_pu_top > div:nth-child(1) img {
  width: calc(100vw * 264 / 750);
  height: calc(100vw * 145 / 750);
  object-fit: cover;
  border-radius: 4px;
}

.co_pu_top > div:nth-child(2) {
  flex: 1;
  position: relative;
}

.co_pu_top > div:nth-child(2) div {
  padding-left: 5%;
}

.co_pu_top > div:nth-child(2) div:nth-child(1) {
  font-size: 15px;
  font-weight: bold;
  color: #1a1a1a;
}

.co_pu_top > div:nth-child(2) div:nth-child(1) p {
  text-overflow: ellipsis;
  display: -webkit-box;
  /* -webkit-box-orient: vertical; */
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.co_pu_top > div:nth-child(2) div:nth-child(2) {
  font-size: 12px;
  color: #999999;
  position: absolute;
  left: 0;
  bottom: 0;
}

.co_pu_bot {
  display: flex;
}

.co_pu_bot > div:nth-child(1) {
  /* flex: 1; */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.co_pu_bot > div:nth-child(2) {
  flex: 1;
  position: relative;
}

.co_pu_money {
  text-align: right;
  flex: 1;
}

.co_pu_money > div:nth-child(1) {
  font-size: 14px;
  color: #666666;
  height: 35px;
  line-height: 40px;
  text-align: right;
}

.co_pu_money > div:nth-child(1) span:last-child {
  color: #b2b2b2;
  font-size: 14px;
}

.co_pu_money > div:nth-child(2) {
  font-size: 12px;
  color: #9d9d9d;
}
.danxi {
  width: 18px;
  height: 18px;
  background: #f39800;
  color: #fff;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  color: #fff;
  position: absolute;
  right: 0px;
  top: 58px;
}
</style>
